<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
		<view class="w-full bg-[var(--page-bg-color)]">
			<view class="pb-[210rpx] relative" :style="headerStyle">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" /> -->
				<!-- #endif -->
				<view class="text-[70rpx] leading-[90rpx] text-[#fff] pl-[60rpx] font-500 pt-[77rpx] price-font">
					{{ parseInt(pointInfo?.point) || 0 }}</view>
				<view class="flex items-center pl-[60rpx]">
					<image class="h-[36rpx] w-[36rpx] -mb-[4rpx]" :src="img('static/resource/images/member/point/icon.png')"
						mode="heightFix" />
					<view class="text-[26rpx] leading-[36rpx] text-[#fff] ml-[10rpx]">我的积分</view>
				</view>
				<!-- <view class="side-tab" :style="{ top: topStyle }" @click="toLink('/app/pages/member/point_detail')">
					<text class="nc-iconfont nc-icon-jifenduihuanV6xx1 icon"></text>
					<text class="desc">积分明细</text>
				</view> -->
			</view>
			<view class="sidebar-margin flex flex-col mt-[-178rpx] relative">
				<view
					class="w-[322rpx] h-[80rpx] text-[30rpx] text-[#333] font-500 box-border pl-[30rpx] pt-[var(--pad-top-m)] rounded-tl-[var(--rounded-big)] overflow-hidden mb-[-2rpx]"
					:style="{ backgroundImage: 'url(' + img('static/resource/images/member/point/top_bg.png') + ') ', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }">
					<text class="leading-[42rpx]">积分详情</text>
				</view>
				<view
					class="flex items-center  justify-center px-[30rpx] rounded-[var(--rounded-big)] !rounded-tl-none bg-[#fff] h-[173rpx] box-border">

					<view class="w-[196rpx] flex-shrink-0 text-center">
						<view class="text-[#333] text-[42rpx] leading-[54rpx] price-font">{{ pointInfo.point || 0 }}</view>
						<view class="mt-[8rpx] text-[var(--text-color-light6)] text-[26rpx] leading-[36rpx] font-400">可用积分</view>
					</view>

				</view>
			</view>
		</view>

		<view class="mt-[30rpx] bg-[var(--page-bg-color)] tab-style-1">
			<view class="tab-left">
				<view class="tab-left-item" :class="{ 'class-select': amount_type == item.status }"
					@click="loadTypeFn(item.status)" v-for="(item, index) in typeList">{{ item.name }}</view>
			</view>
			<view class="tab-right" @click="handleSelect">
				<view class="tab-right-date">日期</view>
				<view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getPointListFn">
			<view v-for="(item, index) in pointList" :key="index" class="sidebar-margin card-template  mb-[var(--top-m)]">
				<view v-show="true">

					<view class="flex items-center ">
						<view class="w-[80rpx] h-[80rpx]">
							<image v-if="item.point > 0" :src="img('static/resource/images/member/point/detail/point_add.png')"
								class="w-[80rpx] h-[80rpx]"></image>
							<image v-else :src="img('static/resource/images/member/point/detail/point_min.png')"
								class="w-[80rpx] h-[80rpx]"></image>
						</view>
						<view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
							<view class="flex-1">
								<view class="text-[32rpx] text-[#333]">{{ item.title }}{{ item.description ? ' - ' +
									item.description : '' }}</view>
								<view class="text-[24rpx] text-[var(--text-color-light9)] mt-[16rpx]">
									{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
							</view>
							<view class="text-[36rpx] font-500 text-[#03B521] price-font"
								:class="{ '!text-primary': item.point > 0 }">{{
									item.point > 0 ?
										'+' + item.point : item.point }}</view>
						</view>
					</view>
				</view>
			</view>
			<mescroll-empty :option="{ tip: '暂无积分明细' }" v-if="!pointList.length && loading"></mescroll-empty>
		</mescroll-body>
		<!-- 时间选择 -->
		<select-date ref="selectDateRef" @confirm="confirmFn" />
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { redirect, img, pxToRpx } from '@/utils/common';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';

import { getMemberAccountPointcount, getTaskPoint, getPointList } from '@/app/api/member';
import { topTabar } from '@/utils/topTabbar'
import useMemberStore from '@/stores/member';
import { timeFormat } from '@/utils/formatting';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '我的积分' })
/********* 自定义头部 - end ***********/

// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const headerStyle = computed(() => {
	return {
		backgroundImage: 'url(' + img('static/resource/images/member/point/point_bg.png') + ') ',
		backgroundSize: 'cover',
		backgroundRepeat: 'no-repeat',
		backgroundPosition: 'bottom',
		// paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
	}
})
const topStyle = computed(() => {
	let style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + 50) + 'rpx;' : '50rpx'
	return style
})

const memberStore = useMemberStore()
const amount_type = ref('all');
const create_time = ref([])
const pointList = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const typeList = ref([
	{ name: '全部', status: 'all' },
	{ name: '收入', status: 'true' },
	{ name: '支出', status: 'false' }
])

const getPointListFn = (mescroll: any) => {
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		// from_type: from_type.value,
		addStatus: amount_type.value == 'all' ? undefined : amount_type.value,
		createTime: create_time.value
	};
	loading.value = false;
	getPointList(data).then((res: any) => {
		let newArr = res.data.list;
		mescroll.endSuccess(newArr.length);
		//设置列表数据
		if (mescroll.num == 1) {
			pointList.value = []; //如果是第一页需手动制空列表
		}
		pointList.value = pointList.value.concat(newArr);
		pointList.value = pointList.value.map(item => {
			item.flag = true
			return item
		})
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

const loadTypeFn = (type: string) => {
	amount_type.value = type;
	pointList.value = [];
	getMescroll().resetUpScroll();
}

//日期筛选
const selectDateRef = ref()
const handleSelect = () => {
	selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
	create_time.value = data;
	pointList.value = []
	getMescroll().resetUpScroll();
}
// const info = computed(() => {
// 	// 装修模式

// 	return memberStore.info;
// })
//个人积分信息
const pointInfo = ref({});
//积分任务
onLoad(async () => {
	let pointInfoRes: any = await getMemberAccountPointcount()
	// let pointListRes :any = await getTaskPoint()
	pointInfo.value = pointInfoRes.data
	// pointList.value = pointListRes.data
	loading.value = true
})
const toLink = (url = '', param = {}) => {
	redirect({ url, param })
}
</script>

<style lang="scss" scoped>
.bg-color {
	background-color: rgba(102, 102, 102, 0.4);
}
</style>
